<template>
  <div class="certificates-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Medal /></el-icon>
          <div class="header-text">
            <h2>我的证书</h2>
            <p>学习成果和荣誉</p>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 证书统计 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Medal /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">全部证书</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Trophy /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.gold }}</div>
            <div class="stat-label">金牌证书</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#909399"><Trophy /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.silver }}</div>
            <div class="stat-label">银牌证书</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#CD7F32"><Trophy /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.bronze }}</div>
            <div class="stat-label">铜牌证书</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 证书展示 -->
    <div class="certificates-grid">
      <el-card
        v-for="cert in certificates"
        :key="cert.id"
        shadow="hover"
        class="certificate-card"
        @click="handleViewCertificate(cert)"
      >
        <div class="certificate-preview" :class="'cert-' + cert.level">
          <div class="cert-header">
            <el-icon :size="50"><Medal /></el-icon>
            <h3>结业证书</h3>
          </div>
          <div class="cert-content">
            <h4>{{ cert.courseName }}</h4>
            <p class="cert-holder">{{ cert.holderName }}</p>
            <p class="cert-description">{{ cert.description }}</p>
          </div>
          <div class="cert-footer">
            <div class="cert-meta">
              <span>证书编号：{{ cert.certNo }}</span>
              <span>颁发日期：{{ cert.issueDate }}</span>
            </div>
            <div class="cert-level">
              <el-tag :type="getLevelType(cert.level)" effect="dark">
                {{ getLevelName(cert.level) }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="certificate-actions">
          <el-button type="primary" @click.stop="handleDownload(cert)">
            <el-icon><Download /></el-icon>
            下载证书
          </el-button>
          <el-button @click.stop="handleShare(cert)">
            <el-icon><Share /></el-icon>
            分享
          </el-button>
        </div>
      </el-card>
    </div>

    <el-empty v-if="certificates.length === 0" description="暂无证书，完成课程后即可获得" />

    <!-- 证书详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="证书详情" width="800px">
      <div v-if="currentCert" class="certificate-detail" :class="'cert-' + currentCert.level">
        <div class="detail-cert-preview">
          <div class="cert-border">
            <div class="cert-header-large">
              <el-icon :size="80"><Medal /></el-icon>
              <h2>结业证书</h2>
              <p class="cert-subtitle">Certificate of Completion</p>
            </div>
            <div class="cert-body">
              <p class="cert-text">兹证明</p>
              <h3 class="cert-holder-large">{{ currentCert.holderName }}</h3>
              <p class="cert-text">已完成</p>
              <h4 class="cert-course-large">《{{ currentCert.courseName }}》</h4>
              <p class="cert-text">课程学习，成绩优秀，特发此证</p>
              <div class="cert-score">
                <span>考试成绩：</span>
                <span class="score-highlight">{{ currentCert.score }}分</span>
              </div>
            </div>
            <div class="cert-footer-large">
              <div class="cert-info-row">
                <span>证书编号：{{ currentCert.certNo }}</span>
                <span>颁发日期：{{ currentCert.issueDate }}</span>
              </div>
              <div class="cert-seal">
                <span>企业培训中心（印）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button type="primary" @click="handleDownload(currentCert)">
          <el-icon><Download /></el-icon>
          下载证书
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Medal, Trophy, Download, Share
} from '@element-plus/icons-vue'

// 状态
const showDetailDialog = ref(false)
const currentCert = ref(null)

// 统计数据
const stats = reactive({
  total: 8,
  gold: 3,
  silver: 3,
  bronze: 2
})

// 证书数据
const certificates = ref([
  {
    id: 1,
    certNo: 'CERT2024010001',
    courseName: 'Vue 3 从入门到精通',
    holderName: '张三',
    description: '恭喜您完成本课程的全部学习',
    score: 95,
    level: 'gold',
    issueDate: '2024-01-12',
    validUntil: '永久有效'
  },
  {
    id: 2,
    certNo: 'CERT2024010002',
    courseName: '产品思维与方法论',
    holderName: '张三',
    description: '恭喜您完成本课程的全部学习',
    score: 88,
    level: 'silver',
    issueDate: '2024-01-10',
    validUntil: '永久有效'
  },
  {
    id: 3,
    certNo: 'CERT2024010003',
    courseName: 'React开发实战',
    holderName: '张三',
    description: '恭喜您完成本课程的全部学习',
    score: 75,
    level: 'bronze',
    issueDate: '2024-01-08',
    validUntil: '永久有效'
  }
])

// 方法
const handleViewCertificate = (cert) => {
  currentCert.value = cert
  showDetailDialog.value = true
}

const handleDownload = (cert) => {
  ElMessage.success('证书下载中：' + cert.courseName)
}

const handleShare = (cert) => {
  ElMessage.success('分享链接已复制')
}

const getLevelName = (level) => {
  const map = {
    gold: '金牌',
    silver: '银牌',
    bronze: '铜牌'
  }
  return map[level] || level
}

const getLevelType = (level) => {
  const map = {
    gold: 'warning',
    silver: 'info',
    bronze: 'danger'
  }
  return map[level] || ''
}
</script>

<style scoped>
.certificates-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.certificate-card {
  cursor: pointer;
  transition: all 0.3s;
}

.certificate-card:hover {
  transform: translateY(-4px);
}

.certificate-preview {
  padding: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
  border: 2px solid #ddd;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cert-gold {
  background: linear-gradient(135deg, #f9d423 0%, #ff4e50 100%);
  border-color: #f9d423;
  color: #fff;
}

.cert-silver {
  background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
  border-color: #bdc3c7;
  color: #fff;
}

.cert-bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
  border-color: #cd7f32;
  color: #fff;
}

.cert-header {
  text-align: center;
}

.cert-header h3 {
  margin: 10px 0 0 0;
  font-size: 24px;
}

.cert-content {
  text-align: center;
}

.cert-content h4 {
  margin: 10px 0;
  font-size: 18px;
}

.cert-holder {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0;
}

.cert-description {
  font-size: 14px;
  margin: 8px 0;
}

.cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 12px;
}

.cert-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.certificate-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.certificate-detail {
  padding: 40px;
}

.detail-cert-preview {
  background: white;
}

.cert-border {
  border: 8px double #ddd;
  padding: 40px;
}

.cert-gold .cert-border {
  border-color: #f9d423;
}

.cert-silver .cert-border {
  border-color: #bdc3c7;
}

.cert-bronze .cert-border {
  border-color: #cd7f32;
}

.cert-header-large {
  text-align: center;
  margin-bottom: 40px;
}

.cert-header-large h2 {
  margin: 16px 0 8px 0;
  font-size: 36px;
}

.cert-subtitle {
  font-size: 18px;
  font-style: italic;
  margin: 0;
  opacity: 0.9;
}

.cert-body {
  text-align: center;
  margin: 40px 0;
}

.cert-text {
  font-size: 16px;
  margin: 12px 0;
}

.cert-holder-large {
  font-size: 32px;
  font-weight: bold;
  margin: 20px 0;
  text-decoration: underline;
}

.cert-course-large {
  font-size: 24px;
  margin: 20px 0;
}

.cert-score {
  margin-top: 20px;
  font-size: 18px;
}

.score-highlight {
  font-weight: bold;
  font-size: 24px;
  margin-left: 8px;
}

.cert-footer-large {
  margin-top: 40px;
}

.cert-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 20px;
}

.cert-seal {
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}
</style>

